import React, { Component } from 'react'
import { List, InputItem, Picker, TextareaItem, Flex,ImagePicker, Toast,Modal } from 'antd-mobile';

import styles from './index.module.scss'
import MyNavBar from '../../../components/MyNavBar'
import HousePackge from '../../../components/HousePackage/index'
import { getuserHouses, housesImage } from '../../../api';

// 房屋类型
const roomTypeData = [
  { label: '一室', value: 'ROOM|d4a692e4-a177-37fd' },
  { label: '二室', value: 'ROOM|d1a00384-5801-d5cd' },
  { label: '三室', value: 'ROOM|20903ae0-c7bc-f2e2' },
  { label: '四室', value: 'ROOM|ce2a5daa-811d-2f49' },
  { label: '四室+', value: 'ROOM|2731c38c-5b19-ff7f' }
]
// 朝向：
const orientedData = [
  { label: '东', value: 'ORIEN|141b98bf-1ad0-11e3' },
  { label: '西', value: 'ORIEN|103fb3aa-e8b4-de0e' },
  { label: '南', value: 'ORIEN|61e99445-e95e-7f37' },
  { label: '北', value: 'ORIEN|caa6f80b-b764-c2df' },
  { label: '东南', value: 'ORIEN|dfb1b36b-e0d1-0977' },
  { label: '东北', value: 'ORIEN|67ac2205-7e0f-c057' },
  { label: '西南', value: 'ORIEN|2354e89e-3918-9cef' },
  { label: '西北', value: 'ORIEN|80795f1a-e32f-feb9' }
]
// 楼层
const floorData = [
  { label: '高楼层', value: 'FLOOR|1' },
  { label: '中楼层', value: 'FLOOR|2' },
  { label: '低楼层', value: 'FLOOR|3' }
]
export default class CitySelect extends Component {
  constructor(props){
    super(props)
    const { state } = props.location
    const community = {
      name: '',
      id: ''
    }
    if (state) {
      // 有小区信息数据，存储到状态中
      community.name = state.name
      community.id = state.id
    }
    this.state = {
      // 临时图片地址
      tempSlides: [],
      // 小区的名称和id
      community,
      // 价格
      price: '',
      // 面积
      size: '',
      // 户型
      roomType: '',
      // 楼层
      floor: '',
      // 朝向：
      oriented: '',
      // 房屋标题
      title: '',
      // 房屋图片
      houseImg: '',
      // 房屋配套：
      supporting: '',
      // 房屋描述
      description: ''
    }
  }
  /* 
    获取表单数据：
  */
  getValue = (name, value) =>{
    // console.log(name, value);
    this.setState({
      [name]: value
    })
  }
    /* 
    获取房屋配置数据：
  */
    handleSupporting = selected => {
      // console.log(selected)
      this.setState({
        supporting: selected.join('|')
      })
    }
  /* 
    获取房屋图片：

    1 给 ImagePicker 组件添加 onChange 配置项。
    2 通过 onChange 的参数，获取到上传的图片，并存储到状态 tempSlides 中。
  */
  handleHouseImg = (files, type, index) => {
    console.log(files, type, index);
    this.setState({
      tempSlides: files
    })
  }
  /* 
    发布房源：

    1 在 addHouse 方法中，从 state 里面获取到所有房屋数据。
    2 使用 API 调用发布房源接口，传递所有房屋数据。
    3 根据接口返回值中的状态码，判断是否发布成功。
    4 如果状态码是 200，表示发布成功，就提示：发布成功，并跳转到已发布房源页面。
    5 否则，就提示：服务器偷懒了，请稍后再试~。
  */
    addHouse = async () => {
      const {
        tempSlides,
        title,
        description,
        oriented,
        supporting,
        price,
        roomType,
        size,
        floor,
        community
      } = this.state
      let houseImg = ''
      if(tempSlides.length > 0){
        // 已经有上传的图片了
      const form = new FormData()
      tempSlides.forEach(item => form.append('file', item.file))
        const res = await housesImage(form)
        // console.log(res.data.body.join('|'));
        houseImg = res.data.body.join('|')
      }
       // 发布房源
       const res = await getuserHouses({
        title,
        description,
        oriented,
        supporting,
        price,
        roomType,
        size,
        floor,
        community: community.id,
        houseImg
      })
      console.log('====================================');
      console.log(res);
      console.log('====================================');
      if (res.data.status === 200) {
        // 发布成功
        Toast.info('发布成功', 1, null, false)
        this.props.history.push('/rent')
      } else {
        Toast.info('服务器偷懒了，请稍后再试~', 2, null, false)
      }
    
    }
  // 取消编辑，返回上一页
  onCancel = () => {
    Modal.alert('提示', '放弃发布房源?', [
      {
        text: '放弃',
        onPress: async () => this.props.history.go(-1)
      },
      {
        text: '继续编辑'
      }
    ])
  }
  componentDidMount(){}
  render() {
    const Item = List.Item
    const { history } = this.props
    const {
      community,
      price,
      roomType,
      floor,
      oriented,
      description,
      tempSlides,
      title,
      size
    } = this.state
    return (
      // 发布房源页面
      <div className={styles.root}>
        <div className={styles.rooms}>
            <MyNavBar></MyNavBar>  
        </div>
        <List
         className={styles.header}
          renderHeader={() => '房源信息'}
          data-role="rent-list"
        >
        {/* 选择所在小区 */}
        <Item
            extra={community.name || '请输入小区名称'}
            arrow="horizontal"
            onClick={() => history.replace('/rent/search')}
          >
            小区名称
          </Item> 
            {/* 相当于 form 表单的 input 元素 */}
            <InputItem
              placeholder="请输入租金/月"
              extra="￥/月"
              value={price}
              onChange={val => this.getValue('price', val)}
            >租&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;金</InputItem>  
            <InputItem
              placeholder="请输入建筑面积"
              extra="m2"
              value={size}
              onChange={val => this.getValue('size', val)}
            >价&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;格</InputItem>  
          {/* 户型 */}
          <Picker
           data={roomTypeData} 
           cols={1}  
           value={[roomType]}
           onChange={val => this.getValue('roomType', val[0])}
           className="forss">
          <Item arrow="horizontal">户&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;型</Item>
        </Picker> 
          {/* 所在楼层 */}
          <Picker
           data={floorData} 
           cols={1}  
           value={[floor]}
           onChange={val => this.getValue('floor', val[0])}
           className="forss">
          <Item arrow="horizontal">所在楼层</Item>
        </Picker> 
          {/* 朝向 */}
          <Picker
           data={orientedData} 
           cols={1}  
           value={[oriented]}
           onChange={val => this.getValue('oriented', val[0])}
           className="forss">
          <Item arrow="horizontal">朝向</Item>
        </Picker>
        </List>
         {/* 房屋标题 */}
        <List
            className={styles.title}
             data-role="rent-list"
            renderHeader={() => '房屋标题'}
          >
            <InputItem
            value={[title]}
            onChange={val => this.getValue('title', val)}
            placeholder="请输入标题（例如：整租 小区名 2室 5000元）"
          ></InputItem>
          </List>                  
         {/* 图像管理 */}
         <List
            className={styles.title}
            data-role="rent-list"
            renderHeader={() => '图像管理'}
          >
            <ImagePicker 
            files={tempSlides}
            onChange={this.handleHouseImg}
            multiple={true}
            className={styles.imgpicker}
            />
          </List>                  
          {/* 房屋配置 */}
          <List
          className={styles.supporting}
          renderHeader={() => '房屋配置'}
          data-role="rent-list"
        >
          <HousePackge  onSelect={this.handleSupporting} />
        {/* <HousePackge></HousePackge> */}
        </List>
        {/* 房屋描述 */}
        <List
          className={styles.desc}
          renderHeader={() => '房屋描述'}
          data-role="rent-list"
        >
          <TextareaItem
            rows={5}
            placeholder="请输入房屋描述信息"
            value={description}
            onChange={val => this.getValue('description', val)}
          />
        </List>
        <Flex className={styles.bottom}>
          <Flex.Item className={styles.cancel} onClick={this.onCancel}>
          取消
          </Flex.Item>
          <Flex.Item className={styles.confirm} onClick={this.addHouse}>
          提交
          </Flex.Item>
        </Flex>
      </div>
    )
  }
}
